<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
            <div class="row-fluid" style="padding-bottom:50px; max-height: 2000px">

                <div class="span11 span11div" >
                    <div class="controls" >
                        <div class="row-fluid" style="height: 50px; background-color: #F58345">
                            <label style="font-size: 30px; line-height: 50px; margin-left: 30px; color: white">Thư Viện</label>

                        </div>                                  
                            <div class="row-fluid">
                             <div id='gallery' >
                             <c:forEach items="${albumList}" var="albumList" varStatus="count">
                             <div class="album" data-jgallery-album-title="${albumList.name}">
                                <h1>${albumList.name}</h1>
                                <c:forEach items="${libraryImageList}" var="libraryImageList">
                                	<c:if test="${albumList.id == libraryImageList.album.id}">
                                	<a href="resources/${fn:toLowerCase(libraryImageList.imageType)}-images/${libraryImageList.name}"><img src="resources/${fn:toLowerCase(libraryImageList.imageType)}-images/${libraryImageList.name}"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a>
                                	</c:if>
                                </c:forEach>
<!--                                 <a href="resources/images/homepage.jpg"><img src="resources/images/homepage.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                  <a href="resources/images/homepage1.jpg"><img src="resources/images/homepage1.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                   <a href="resources/images/homepage2.jpg"><img src="resources/images/homepage2.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                    <a href="resources/images/homepage3.jpg"><img src="resources/images/homepage3.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                     <a href="resources/images/homepage4.jpg"><img src="resources/images/homepage4.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                      <a href="resources/images/IMG_4510-1.jpg"><img src="resources/images/IMG_4510-1.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                       <a href="resources/images/IMG_4537-1.jpg"><img src="resources/images/IMG_4537-1.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                        <a href="resources/images/IMG_4538-1.jpg"><img src="resources/images/IMG_4538-1.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                         <a href="resources/images/fruitchiller_product.jpg"><img src="resources/images/fruitchiller_product.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                          <a href="resources/images/cappu_product.jpg"><img src="resources/images/cappu_product.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
                                </div>
                             </c:forEach>
                                
<!--                                      <div class="album" data-jgallery-album-title="Album thang 10"> -->
<!--                                 <h1>Album thang 9</h1> -->
                                
<!--                                 <a href="resources/images/homepage.jpg"><img src="resources/images/homepage.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                  <a href="resources/images/homepage1.jpg"><img src="resources/images/homepage1.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                   <a href="resources/images/homepage2.jpg"><img src="resources/images/homepage2.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                    <a href="resources/images/homepage3.jpg"><img src="resources/images/homepage3.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                     <a href="resources/images/homepage4.jpg"><img src="resources/images/homepage4.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                      <a href="resources/images/IMG_4510-1.jpg"><img src="resources/images/IMG_4510-1.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                       <a href="resources/images/IMG_4537-1.jpg"><img src="resources/images/IMG_4537-1.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                        <a href="resources/images/IMG_4538-1.jpg"><img src="resources/images/IMG_4538-1.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                         <a href="resources/images/fruitchiller_product.jpg"><img src="resources/images/fruitchiller_product.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                          <a href="resources/images/cappu_product.jpg"><img src="resources/images/cappu_product.jpg"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" /></a> -->
<!--                                 </div> -->
                          
                                </div>
                            </div>
                     
                    </div>
                </div>
            </div>
  <br/>
  <br/>
  <br/>